<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
	<base href="/">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    <script type="text/javascript" src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
    <style type="text/css">
      .layui-laypage {
        margin-left: 35%;
        margin-top: 50px;
      }
      .checkItem{
	    width: 19px;
	    height: 19px;
      }
    </style>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <!--<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>-->
      <!--<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>-->
    <!--[endif]-->
  </head>
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">系统管理</a>
        <a>
          <cite>角色管理</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" id="searchForm">
          <input type="text" name="roleName"  id="roleName" placeholder="请输入角色名"  autocomplete="off" class="layui-input">
          <button class="layui-btn"  lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
        </form>
      </div>
      <xblock id="roleAddBtn">
        <button class="layui-btn" onclick="x_admin_show('添加角色','page/role-form',400,300)"><i class="layui-icon"></i>添加</button>
      </xblock>
      <table class="layui-table">
        <thead>
          <tr>
            <th>
               <input type="checkbox" class="checkItem header">
            </th>
            <th>ID</th>
            <th>姓名</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>

      <div id="page"></div>
      <input type="hidden" id="pages">
      <input type="hidden" id="pageNum">

    </div>
    <script>
      if(urlValidate("/role-post")<0){
         $("#roleAddBtn").remove();
      }

      layui.use(['form','laypage'], function(){
          var form=layui.form;
          laypage = layui.laypage;
          //搜索框点击事件
          form.on('submit(search)',function(){
              initRoleList();
              return false;
          });
          //初始化表格数据
          initRoleList();
          //编辑
          $(document).on('click','.edit',function () {
              var roleId=$(this).attr("link");
              x_admin_show('修改角色','page/role-form?id='+roleId,400,300);
              return false;
          });
          //角色授权
          $(document).on('click','.auth',function () {
              var roleId=$(this).attr("link");
              x_admin_show('角色授权','page/role-authorization?id='+roleId,800,600);
              return false;
          });
          //删除
          $(document).on('click','.delete',function () {
              var roleId=$(this).attr("link");
              $.ajax({
                 url:'role/'+roleId,
                 type:'delete',
                 success:function (res) {
                     if(res.code==200){
                         layer.msg("删除成功!",{icon:1,time:1000});
                         initRoleList($("#pageNum").val());
                     }
                 }
              });
              return false;
          });
      });

      function initRoleList(pn,pageSize){
          if(urlValidate("/role-get")>=0){
              $.ajax({
                  url:"role",
                  data:{roleName:$("#roleName").val(),pn:pn,pageSize:pageSize},
                  success:function(result){
                      if(result.code==200){
                          $(".layui-table tbody").empty();
                          $.each(result.data.pageInfo.list,function (index,item) {
                              var td1=$("<td></td>").append(getCheckItem(item.roleId,item.roleName));
                              var td2=$("<td></td>").append(item.roleId);
                              var td3=$("<td></td>").append(item.roleName);
                              var td4=$("<td></td>").addClass("td-manage");
                              if(localStorage.getItem("urls").indexOf("/role-post")>=0){
                                  td4.append(getEditItem(item.roleId,"edit"));
                              }
                              if(localStorage.getItem("urls").indexOf("/role-authorization-post")>=0){
                                  td4.append($("<button></button>").addClass("layui-btn layui-btn-small layui-btn-normal auth").attr("link",item.roleId).append($("<i></i>").addClass("layui-icon").append("&#xe857;")).append("角色授权"));
                              }
                              if(localStorage.getItem("urls").indexOf("/role/{id}-delete")>=0){
                                  td4.append(getDeleteItem(item.roleId,"delete"));
                              }
                              $(".layui-table tbody").append($("<tr></tr>").append(td1).append(td2).append(td3).append(td4));
                          });
                          var pages=result.data.pageInfo.pages;//总页数
                          var curr_page=result.data.pageInfo.pageNum;//当前页
                          var counts=result.data.pageInfo.total;//总记录数
                          $("#totals").text(counts);
                          $("#pages").val(pages+1);
                          $("#pageNum").val(curr_page);

                          laypage.render({
                              elem: 'page'
                              ,count: counts //数据总数，从服务端得到
                              ,pages: pages
                              ,first: 1
                              ,last:  pages
                              ,curr:curr_page
                              ,layout: ['prev','page','next','skip','count']
                              ,jump: function(obj, first){
                                  //obj包含了当前分页的所有参数，比如：
                                  //首次不执行
                                  if(!first){
                                      //do something
                                      var toPage=obj.curr;
                                      if(toPage!=curr_page){
                                          initRoleList(toPage);
                                      }
                                  }
                              }
                          });
                      }
                  }
              });
          }else{
              $(".layui-table tbody").empty();
              $(".layui-table tbody").append('<tr><td colspan="4" align="center">您没有权限查看相关数据</td></tr>');
          }
      }
    </script>
  </body>
</html>